<!DOCTYPE html>
<html>

	<head>
		<title>多彩蓓蕾</title>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
		<meta name="description" content=" ">
		<link rel="stylesheet" href="lib/mui.min.css" />
		<link rel="stylesheet" href="lib/weui.min.css">
		<link rel="stylesheet" href="css/jquery-weui.css">
		<link rel="stylesheet" href="css/style.css" />
		<link rel="stylesheet" href="lib/preview.css">
	</head>
	<script src="lib/jquery-2.1.4.js"></script>

	<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
	<script src="js/jquery-weui.js"></script>
	<script src="lib/fastclick.js"></script>

	<style type="text/css">
		*{
			-webkit-user-select: auto;
		}
		.send_detail .head-img {
			overflow: hidden;
			padding: 0 .5rem;
			height: 1.8rem;
		}
		
		.send_detail .head-img>img {
			float: left;
			width: 1.8rem;
			height: 1.8rem;
			border-radius: 1rem;
		}
		
		.send_detail .head-info {
			width: 80%
		}
		
		.send_detail .head-info p:first-of-type {
			height: 1rem;
			line-height: 1rem;
			font-size: .7rem;
			color: #222;
		}
		
		.send_detail .head_icon {
			float: right;
			margin-left: 10px
		}
		
		.send_detail .head_icon img {
			width: 20px;
			height: 20px;
			vertical-align: middle;
		}
		
		.send_detail .news_zixun {
			padding: 0 .5rem;
			border-bottom: 1px solid #eee;
			/*margin-bottom: .5rem;*/
		}
		/*.news_zixun:nth-last-of-type(1) {
	border-bottom: none;
	margin-bottom: 0
}*/
		
		.send_detail .news_zixun .news_zixun_title {
			height: auto;
			color: #555;
			display: -webkit-box;
			-webkit-box-orient: vertical;
			/*-webkit-line-clamp: 2;*/
			overflow: hidden;
			font-size: 0.8rem;
			margin: .5rem 0;
		}
		
		.send_detail .news_zixun .news_zixun_img {
			overflow: hidden;
		}
		
		.send_detail .news_zixun .news_zixun_img img {
			float: left;
			width: 31.6%;
			/*height: 80px;*/
			margin-right: 2.6%;
			margin-bottom: .5rem;
		}
		
		.send_detail .news_zixun .news_zixun_img img:nth-of-type(3n) {
			margin-right: 0px;
		}
		
		.send_detail .bg_bar {
			width: 100%;
			height: .5rem;
			background: #f4f4f4;
		}
		
		.topic_tle {
			padding: 0.5rem;
			font-size: 1rem;
		}
		
		.score_width {
			width: 160px;
		}
		
		.floor {
			color: #5A5A5A;
			font-size: 12px;
			/*margin-left: 2rem;*/
		}
		
		.edit {
			display: inline-block;
			height: 26px;
			overflow: hidden;
			float: right;
		}
		
		.edit img {
			width: 26px;
			height: 26px;
			float: left;
			margin-top: 5px;
		}
		
		.score {
			float: left;
		}
		
		.get_score_desc {
			font-size: 12px;
		}
		
		.get_score_desc span:nth-of-type(1) {
			margin-right: 5px;
		}
		
		.get_score_body {
			overflow: hidden;
			padding-top: .3rem;
		}
		
		.get_score {
			padding: .5rem;
		}
		
		.score_box {
			float: left;
			overflow: hidden;
			/*width: 8rem;*/
			height: 1.8rem;
		}
		
		.score_box img {
			border-radius: 18px;
		}
		
		.right_commen {
			float: right;
			position: relative;
		}
		
		.right_commen:after {
			content: '';
			height: 30px;
			width: 3px;
			background: #ddd;
			position: absolute;
			left: -8px;
			top: 5px;
			border-radius: 1.5px;
		}
		
		.replay{background: #ddd;color: #5A5A5A;}
	</style>

	<body>
		<div class="send_detail">
			<div class="topic_tle">我是标题</div>
			<div class="head-img">
				<img src="img/head.png">
				<div class="head-info">
					<p>于云鹤233</p>
					<p>
						<span>2017-03-17</span>		
						<span class="head_icon"><img src="img/commen.png"> 10</span>
						<span class="head_icon"><img src="img/read.png"> 20</span>
					</p>
				</div>
			</div>

			<div class="send_box">
				<div class="news_zixun">

					<p class="news_zixun_title">4月17日，某某领导视察，4月17日，某某领导视察4月17日，某某领导视察，某某领导视察4月17日，某某领导视察，某某领导视察4月17日，某某领导视察</p>
					<div class="news_zixun_img">
						<img class="lazy" data-original="img/001.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-2.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-3.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/001.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-2.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-3.jpg" data-preview-src="" data-preview-group="1">
					</div>

				</div>
				<div class="bg_bar"></div>

			</div>
		</div>

		<div class="get_score">
			<p class="get_score_desc">
				<!--<span>1人评价</span><span>共1财富</span>-->
			</p>
			<div class="get_score_body">
				<div class="score">
					<div class="score_box">

						
					</div>
					<img src="img/more.png" width="36" height="36">
				</div>
				<div class="right_commen">
					<img src="img/score.png" width="36" height="36">
				</div>
			</div>
		</div>
		<div style="height: .5rem;width: 100%;background: #F4F4F4;"></div>

		<div class="comment-box">
			<!--<div class="comment">
				<div class="avtar"><img src="img/head.png" width="36" height="36"></div>
				<div class="comment-content">
					<p class="avtar-name"><span>于云鹤</span><span class="floor">5楼</span><span class="edit"><img src="img/edit.png"></span></p>
					<p class="comments">哈哈哈哈啊哈哈哈</p>
					<p class="comment-time"><span>2017-06-2</span> · <span>回复> </span></p>
				</div>
			</div>-->
			<div class="comment">
				<div class="avtar"><img src="img/head.png" width="36" height="36"></div>
				<div class="comment-content">
					<p class="avtar-name"><span>于云鹤</span><span class="floor">5楼</span><span class="edit"><img src="img/edit.png"></span></p>
					<p class="comments">哈哈哈哈啊哈哈哈</p>
					<div class="replay">
						我是回复，我是回复，我是回复，我是回复,我是回复
					</div>
					<p class="comment-time"><span>2017-06-2</span> · <span>回复> </span></p>
				</div>
			</div>
			<style>
				.comments img{width: 31.6%;margin-right: 2.6%;float: left;height: 60px;}
				.comments img:nth-of-type(3n){margin-right: 0;}
			</style>
			<div class="comment">
				<div class="avtar"><img src="img/head.png" width="36" height="36"></div>
				<div class="comment-content">
					<p class="avtar-name"><span>于云鹤</span><span class="floor">5楼</span><span class="edit"><img src="img/edit.png"></span></p>
					<p class="comments">
						<img class="lazy" data-original="img/001.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-2.jpg" data-preview-src="" data-preview-group="1">
						<img class="lazy" data-original="img/swiper-3.jpg" data-preview-src="" data-preview-group="1">
					</p>
					
					<p class="comment-time"><span>2017-06-2</span> · <span>回复> </span></p>
				</div>
			</div>

		</div>

		<div id="sheet1" class="mui-popover mui-popover-bottom mui-popover-action ">
			<!-- 可选择菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#">编辑评论</a>
				</li>
				<li class="mui-table-view-cell">
					<a href="#">删除评论</a>
				</li>
			</ul>
			<!-- 取消菜单 -->
			<ul class="mui-table-view">
				<li class="mui-table-view-cell">
					<a href="#sheet1"><b>取消</b></a>
				</li>
			</ul>
		</div>

		<script src="https://cdn.bootcss.com/jquery_lazyload/1.9.7/jquery.lazyload.js"></script>
		<script src="lib/fastclick.js"></script>
		<script type="text/javascript" src="lib/mui.min.js"></script>
		<script type="text/javascript" src="lib/mui.previewimage.js"></script>
		<script type="text/javascript" src="lib/mui.zoom.js"></script>
		<script type="text/javascript" src="js/jquery-weui.js"></script>
		<script type="text/javascript">
			FastClick.attach(document.body);
			mui.init();

			mui.previewImage();
			//懒加载参数设置
			$("img.lazy").lazyload({
				placeholder: "img/pic_article.png",
				threshold: 200,
				event: 'scroll',
				//failurelimit : 10 ,
				effect: "fadeIn"
			});

			$(function() {
				//列表图片宽高比例一致
				var send_w = $('.news_zixun .news_zixun_img img').width();
				var score_box = $('.score_box').width();
				$('.news_zixun .news_zixun_img img').height(send_w);
				console.log(score_box)

				//评分 人 多于四位  score_box宽度固定 
				if(score_box > 150) {
					$('.score_box').addClass('score_width')
				}

				//点击更多  弹出底部
				$('body').on('click', '.edit img', function() {

					mui('#sheet1').popover('toggle');
				})

				//本页 顶部 帖子内容
				$.ajax({
					type: "get",
					url: "http://hc.588net.com/index.php/topic/topic_post/postInfo?accessSecret=77dc053dd95eb6f24cb82637cb695&accessToken=335a25d7083691f0c5c0d52fc32c2&id=1784918&tid=710&user_id=3717435",
					dataType: "json",
					success: function(data) {
						console.log(data.data.reward.userList[0].userIcon);
						var htm = '';
						var score = '';
						score_box = '';
						htm += '<div class="topic_tle">' + data.data.title + '</div>';
						htm += '<div class="head-img">';
						htm += '<img src="' + data.data.avatar + '">';
						htm += '<div class="head-info">';
						htm += '<p>' + data.data.username + '</p>';
						htm += '<p><span>' + data.data.ctime + '</span><span class="head_icon"><img src="img/commen.png">' + data.data.pcounts + '</span><span class="head_icon"><img src="img/read.png">' + data.data.readcount + '</span></p>';
						htm += '</div></div>';
						htm += '<div class="send_box">';
						htm += '<div class="news_zixun">';
						htm += '<p class="news_zixun_title">' + data.data.content + '</p>';
						htm += '<div class="news_zixun_img">';
						htm += '<img class="lazy" data-original="" data-preview-src="" data-preview-group="1">';
						htm += '</div></div>';
						htm += '<div class="bg_bar"></div>';
						htm += '</div>';

						score += '<span>' + data.data.reward.userNumber + '人评价</span><span>共' + data.data.reward.score[0].value + '财富</span>';
						score_box += '<img src="' + data.data.reward.userList[0].userIcon + '" width="36" height="36">';

						//htm+='';
						$('.get_score_desc').append(score);
						$('.score_box').append(score_box);
						//$('.send_detail').append(htm);
					}

				});

				//本页 顶部 帖子评论
				$.ajax({
					type: "get",
					url: "http://hc.588net.com/index.php/topic/topic_post_comment/getCommentList?accessSecret=77dc053dd95eb6f24cb82637cb695&accessToken=335a25d7083691f0c5c0d52fc32c2&id=1784918&page=1&tid=710&user_id=3717435",
					dataType: 'json',
					success: function(e) {
						//console.log(e.data);
						var comment = '';
						$.each(e.data, function(a, b) {
							comment += '<div class="comment">';
							comment += '<div class="avtar"><img src="' + b.useravatar + '" width="36" height="36"></div>';
							comment += '<div class="comment-content">';
							comment += '<p class="avtar-name"><span>' + b.username + '</span><span class="floor">' + b.floor + '</span><span class="edit"><img src="img/edit.png"></span></p>';
							comment += '<p class="comments">' + b.content + '</p>';
							comment += '<p class="comment-time"><span>' + b.ctime + '</span> · <span>回复> </span></p>';
							comment += '</div></div>';
							console.log(a);
							console.log(b);
						});

						$('.comment-box').append(comment);

					}
				});

			})
		</script>
	</body>

</html>